<template>
	<view class="u-page">
		<view class="topic grid col-1">
			<!-- <view class="topic-box" v-for="(item,index) in videos" :key="index" @tap="gotoPage('/pages/home/video/index?url='+item.url+'&title='+item.name+'&content='+item.content)"> -->

			<view class="topic-box" v-for="(item,index) in videos" :key="index">
				<view class="topic-main video-mian">
					<image :src="item.coverUrl" mode="aspectFill"></image>
					<view class="topic-text video-text">{{replaceSpecialChar(item.name)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSwiperList } from '@/api/home.js'
	export default {
		data() {
			return {
				videos:[],
				pageNum:1,
			}
		},
		onLoad() {
			this.getResource('APP首页企业专题视频','videos')
		},
		onReachBottom(){
			this.pageNum += 1
			this.getResource('APP首页企业专题视频','videos')
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.videos = []
			this.getResource('APP首页企业专题视频','videos')
			uni.stopPullDownRefresh()
		},
		methods: {
			replaceSpecialChar(text) {
			  text = text.replace(/&quot;/g, '"');
			  text = text.replace(/&amp;/g, '&');
			  text = text.replace(/&lt;/g, '<');
			  text = text.replace(/&gt;/g, '>');
			  text = text.replace(/&nbsp;/g, ' ');
			  return text;
			},
			async getResource(position,item){
				const { data } = await getSwiperList({position:position,pageNum:this.pageNum});
				if(data.code == 200){
					if(position.indexOf('图片')>0){
						this[item] = data.rows.map(e=>e.url)
					}else if(position.indexOf('视频')>0){
						this[item] = data.rows
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.topic{
		// padding: 0rpx 15rpx;
		width: 100%;
	}
	.topic-box{
		padding:10rpx;
	}
	
	.topic-main{
		border-radius: 15rpx;
		overflow: hidden;
		
		height: 160rpx;
		position: relative;
	}
	.topic-main image{
		width: 100%;
		height: 160rpx;
		transition:0.3s all;
		-webkit-transition:0.3s all;
		-moz-transition:0.3s all;
		-o-transition:0.3s all;
		-ms-transition:0.3s all;
	}
	.topic-main:hover image{
		-webkit-transform:scale(1.3);
		-ms-transform:scale(1.3);
		transform:scale(1.3);
	}
	.topic-text{
		position: absolute;
		width: 100%;
		height: 160rpx;
		text-align: center;
		line-height: 160rpx;
		top: 0px;
		font-size: 30rpx;
		left: 0px;
		font-weight: bold;
		z-index: 10;
		background-color: rgba(0,0,0,0.3);
		color: #fff;
	}
	
	.video-mian{
		height: 260rpx;
	}
	.video-mian image{
		height: 260rpx;
	}
	.video-text{
		height: 260rpx;
		line-height: 260rpx;
	}
</style>
